<script setup>
import { ref } from 'vue';

import Notice from "@/view/notice.vue";

const gender = ref(''); // 使用 ref 定义响应式数据
const username = ref('');
const description=ref('');
const school=ref('');
const company=ref('');
const job=ref('');
import axios from 'axios';

</script>


<template>
  <div class="containersss">
    <div class="itemss"></div>
    <div class="rectangle">
      <div>
        <router-link to="/subscribe" class="text1" style="position: absolute; top: 30px; right: 150px;">关注</router-link>
        <div class="vertical-line"></div>
        <div>
          <router-link to="/follower" class="text1" style="position: absolute; top: 30px; right: 50px;">粉丝</router-link>
        </div>
      </div>
      <div class="rectangle2">
        <div>
          <router-link to="/change" class="text1" style="position: absolute; top: 1px; right: 50px;">修改个人信息</router-link>
        </div>
      </div>
      <div>
        <div style="position: absolute;top:185px;left:50px;">
          <svg t="1745325827464" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3203" width="18" height="18" data-spm-anchor-id="a313x.search_index.0.i8.54a43a81VKYHhk"><path d="M587.6224 843.997867l172.561067 61.371733c12.8 4.539733 17.134933 1.399467 16.776533-12.1856l-5.034667-183.074133c-1.262933-45.397333 19.029333-107.861333 46.728534-143.872l111.684266-145.134934c8.277333-10.752 6.638933-15.872-6.4-19.712l-175.6672-51.780266c-43.554133-12.834133-96.682667-51.421867-122.368-88.917334l-103.543466-151.074133c-7.68-11.195733-13.038933-11.195733-20.718934 0l-103.543466 151.074133c-25.6512 37.461333-78.779733 76.066133-122.368 88.917334L100.061867 401.390933c-13.021867 3.84-14.677333 8.942933-6.4 19.712l111.684266 145.152c27.682133 35.976533 47.991467 98.423467 46.728534 143.854934l-5.034667 183.074133c-0.3584 13.568 3.976533 16.725333 16.776533 12.1856l172.544-61.371733c42.786133-15.2064 108.458667-15.223467 151.261867 0z m-22.869333 64.324266c-28.0064-9.966933-77.533867-9.949867-105.506134 0l-172.561066 61.354667c-58.026667 20.650667-109.568-16.878933-107.8784-78.370133l5.034666-183.074134c0.8192-29.730133-14.506667-76.8-32.597333-100.352l-111.684267-145.152c-37.546667-48.810667-17.800533-109.431467 41.198934-126.805333l175.6672-51.797333c28.5184-8.413867 68.573867-37.512533 85.367466-62.020267l103.543467-151.074133c34.816-50.7904 98.56-50.7392 133.3248 0l103.543467 151.074133c16.810667 24.5248 56.8832 53.623467 85.367466 62.020267l175.6672 51.780266c59.067733 17.408 78.711467 78.062933 41.198934 126.805334l-111.684267 145.169066c-18.1248 23.552-33.416533 70.656-32.597333 100.352l5.034666 183.074134c1.706667 61.559467-49.92 98.986667-107.861333 78.370133L564.736 908.322133z" fill="#2B2B2B" p-id="3204" data-spm-anchor-id="a313x.search_index.0.i7.54a43a81VKYHhk" class=""></path><path d="M518.178133 360.9088a34.133333 34.133333 0 1 1 55.9104-39.150933l43.639467 62.344533a34.133333 34.133333 0 0 0 21.8624 13.994667l66.2528 12.049066a34.133333 34.133333 0 1 1-12.219733 67.1744l-66.2528-12.049066a102.4 102.4 0 0 1-65.570134-42.018134l-43.6224-62.344533z" fill="#D5AC86" p-id="3205" data-spm-anchor-id="a313x.search_index.0.i6.54a43a81VKYHhk" class="selected"></path></svg>
        </div>
        <div>
          <router-link to="/collect" class="text1" style="position: absolute; top: 180px; right: 90px;" >收藏夹</router-link>
        </div>

      </div>

      <div>
        <div style="position: absolute;top:230px;left:50px;">
          <svg t="1745327355745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5648" width="19" height="19"><path d="M778.24 61.44a122.88 122.88 0 0 1 122.88 122.88v655.36a122.88 122.88 0 0 1-122.88 122.88H245.76a122.88 122.88 0 0 1-122.88-122.88V184.32a122.88 122.88 0 0 1 122.88-122.88h532.48z m0 61.44H245.76a61.44 61.44 0 0 0-61.3376 57.83552L184.32 184.32v655.36a61.44 61.44 0 0 0 57.83552 61.3376L245.76 901.12h532.48a61.44 61.44 0 0 0 61.3376-57.83552L839.68 839.68V184.32a61.44 61.44 0 0 0-57.83552-61.3376L778.24 122.88zM563.2 532.48a30.72 30.72 0 0 1 0 61.44h-266.24a30.72 30.72 0 0 1 0-61.44h266.24z m163.84-225.28a30.72 30.72 0 0 1 0 61.44h-430.08a30.72 30.72 0 0 1 0-61.44h430.08z" fill="#2c2c2c" p-id="5649"></path></svg>
        </div>
        <router-link to="/notes" class="text1" style="position: absolute; top: 225px; right: 80px;" >我的笔记</router-link>

      </div>

      <div>
        <div style="position: absolute;top:275px;left:50px;">
          <svg t="1745327845150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7050" width="19" height="19"><path d="M777.862 975.907c-33.525 30.578-68.63 0-68.63 0L554.808 820.786l34.316-34.474L692.072 682.9l34.316 34.466-102.947 103.418 34.315 34.471 68.632-68.943 34.317 34.474-68.633 68.94 51.474 51.708 154.42-155.122c31.955-30.968 63.056-74.599 17.16-120.652L812.177 562.245l34.315-34.47 102.948 103.41c45.897 46.052 43.59 127.803-2.308 173.85 0 0-149.052 152.43-169.271 170.872zM125.86 631.186L692.072 62.404c45.842-46.112 108.58-28.865 154.42 17.233l102.95 103.418c45.84 46.1 54.141 114.199 8.325 160.302l-557.38 563.6L21.52 1007.19l104.34-376.004zM914.86 319.75c46.889-45.028 46.106-56.122 0.266-102.225L812.178 114.108c-45.843-46.102-57.13-46.102-102.947 0l-51.475 51.709L863.652 372.65l51.207-52.9z m-85.522 87.367L623.44 200.29 228.807 596.715l205.894 206.828 394.636-396.425zM366.07 872.492l34.317-34.471L194.49 631.186l-34.315 34.474-69.883 278.616 275.777-71.784zM57.228 251.999C75.586 231.685 227.326 81.954 227.326 81.954c45.842-46.103 127.217-48.42 173.059-2.32l102.947 103.42-34.315 34.47L366.07 114.106c-45.842-46.101-96.194-10.228-120.106 17.238L91.543 286.47l51.474 51.704 68.633-68.944 34.314 34.473-68.63 68.947 34.314 34.468 102.947-103.415 34.316 34.473-102.948 103.416-34.315 34.471-154.42-155.12c0-0.004-30.438-35.27 0-68.944z" p-id="7051" fill="#2c2c2c"></path></svg>
        </div>
        <div @click="toggleContent3" class="text1" style="position: absolute; top: 270px; right: 80px;" >我的题解</div>

      </div>

      <div>
        <div style="position: absolute;top:320px;left:50px;">
          <svg t="1745328475344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8156" width="20" height="20"><path d="M512 116.906667c-162.190222 0-293.660444 137.102222-293.660444 306.289777v272.64a26.282667 26.282667 0 0 1-4.636445 14.791112l-62.407111 91.392a52.906667 52.906667 0 0 0-3.640889 53.020444c8.419556 16.981333 25.201778 27.648 43.52 27.648H832.853333c18.318222 0 35.100444-10.666667 43.52-27.648a52.906667 52.906667 0 0 0-3.640889-53.020444l-62.407111-91.392a26.282667 26.282667 0 0 1-4.636444-14.791112v-272.64C805.660444 254.037333 674.190222 116.906667 512 116.906667z m24.462222-25.543111h-48.924444c-20.280889 0-36.693333-17.152-36.693334-38.314667 0-21.134222 16.412444-38.286222 36.693334-38.286222h48.924444c20.280889 0 36.693333 17.152 36.693334 38.286222 0 21.162667-16.412444 38.286222-36.693334 38.314667z m61.184 918.954666H450.844444c-20.252444 0-36.693333-17.123556-36.693333-38.286222 0-21.134222 16.440889-38.286222 36.693333-38.286222h146.830223c20.280889 0 36.693333 17.152 36.693333 38.286222 0 21.162667-16.412444 38.286222-36.693333 38.286222z" fill="#2c2c2c" p-id="8157"></path></svg>
        </div>
        <router-link to="/notice" class="text1" style="position: absolute; top: 315px; right: 80px;" >我的消息</router-link>

      </div>

      <div>
        <div style="position: absolute;top:365px;left:50px;">
          <svg t="1745328981817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9816" width="20" height="20"><path d="M875.52 151.552h-2.048C802.816 80.896 709.12 37.888 609.28 31.232v399.36h389.12c-4.096-104.96-48.128-204.8-122.88-279.04z" fill="#2c2c2c" p-id="9817"></path><path d="M537.6 39.424h-29.184c-264.192 0-478.72 214.016-478.72 478.208 0 264.704 214.528 478.72 478.72 478.72 261.632 1.024 475.136-208.896 478.72-470.528V496.64H537.6V39.424z m389.12 518.144c-8.704 99.84-52.736 194.048-124.928 264.192h-2.048c-77.824 76.288-182.272 118.784-291.328 118.784-232.448 0-420.352-187.904-420.352-420.352-1.536-221.184 169.984-406.016 391.168-420.352v457.728H926.72z" fill="#2c2c2c" p-id="9818"></path></svg>
        </div>
        <router-link to="/" class="text1" style="position: absolute; top: 360px; right: 80px;" >做题分析</router-link>

      </div>

    </div>
<div class="rectangle-right"></div>
    <div class="text2" style="position: absolute;top:250px;left:500px;">基本信息</div>
    <div class="horizontal-line" style="position: absolute;top:280px;left:500px;"></div>
    <div class="text3">
      <div style="position: absolute;top:310px;left:500px;">昵称</div>
      <input class="input" style="position: absolute;top:310px;left:600px;" type="text" id="username" v-model="username" placeholder="请输入用户名" />
      <div style="position: absolute;top:370px;left:500px;">性别</div>

      <div>
        <div style="position: absolute;top:370px;left:600px;">
        <label>
          <input type="radio" value="male" v-model="gender" /> 男
        </label>
        <label>
          <input type="radio" value="female" v-model="gender" /> 女
        </label>

        </div>
      </div>
      <div style="position: absolute;top:430px;left:500px;">个人简介</div>
      <textarea class="input" style="height:112px;position: absolute;top:430px;left:600px; " id="description" v-model="description" placeholder="请输入描述"></textarea>
    </div>
    <div class="text2" style="position: absolute;top:570px;left:500px;">教育与工作信息</div>
    <div class="horizontal-line" style="position: absolute;top:600px;left:500px;"></div>
    <div class="text3">
      <div style="position: absolute;top:630px;left:500px;">就读学校</div>
      <input class="input" style="position: absolute;top:630px;left:600px;" type="text" id="school" v-model="school" placeholder="请输入学校" />
      <div style="position: absolute;top:690px;left:500px;">所在公司</div>
      <input class="input" style="position: absolute;top:690px;left:600px;" type="text" id="company" v-model="company" placeholder="请输入公司" />
      <div style="position: absolute;top:750px;left:500px;">职位</div>
      <input class="input" style="position: absolute;top:750px;left:600px;" type="text" id="job" v-model="job" placeholder="请输入职位" />

    </div>

    <div class="text2" style="position: absolute;top:810px;left:500px;">网站信息</div>
    <div class="horizontal-line" style="position: absolute;top:840px;left:500px;"></div>
    <div class="text3">
      <div style="position: absolute;top:870px;left:500px;">个人网站</div>
      <input class="input" style="position: absolute;top:870px;left:600px;" type="text" id="web" v-model="web" />
      <div style="position: absolute;top:930px;left:500px;">GitHub</div>
      <input class="input" style="position: absolute;top:930px;left:600px;" type="text" id="git" v-model="git"  />
      <button @click="Save" style="position: absolute;top:1000px;left: 730px;background-color: white;border-radius: 5px;">保存修改</button>
    </div>

    <!--保存键方法还没写-->



  </div>
</template>

<style scoped>

.containersss {
  height: 200vh;
  background-color: #ffffff;
}
.input{
  border-radius: 5px;
  height: 28px;
  width: 400px;
  border: 1px solid #ccc;
}

.text1 {
  font-size: 15px;
  color: grey;
  white-space: nowrap; /* 防止文本换行 */
  cursor: pointer;
}

.text1:hover {
  color: black;
  background: transparent;
}

.text2{
  font-size: 20px;
  color: black;
  white-space: nowrap; /* 防止文本换行 */
}
.text3{
  font-size: 15px;
  color: grey;
  white-space: nowrap; /* 防止文本换行 */

}

.horizontal-line {
  width: 650px;
  height: 1px;
  background-color: grey;
  position: absolute;

}

.itemss {
  position: relative;
  top: 50px;
  height: 110px;
  width: 1230px;
  display: flex;
  gap: 40px;
  padding: 0 50px;
  margin-bottom: 100px;
}

.rectangle {
  width: 230px;
  height: 450px;
  background-color: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 210px;
  left: 170px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

.rectangle2 {
  width: 200px; /* 增加宽度 */
  height: 30px;
  background-color: #b1bfd3;
  border-radius: 5px;
  position: absolute;
  top: 130px;
  left: 18px;
}

.rectangle-right {
  width: 700px;
  height: 1000px;
  background-color: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 110px;
  left: 470px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

.vertical-line {
  width: 2px;
  height: 50px;
  background-color: grey;
  position: absolute;
  top: 30px;
  left: 113px;
}


</style>